<template>
    <div class="table">
<!--        <div class="crumbs">-->
<!--            <el-breadcrumb separator="/">-->
<!--                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 设备组管理</el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </div>-->
        <div class="container">
<!--            <div style="">-->
<!--                <el-tabs v-model="tabIndexActive" type="card" @tab-click="handleClick">-->
<!--                    <el-tab-pane label="设备分组" name="first"></el-tab-pane>-->
<!--                    <el-tab-pane label="自定义分组" name="second"></el-tab-pane>-->
<!--                </el-tabs>-->
<!--            </div>-->
            <div style="margin-bottom: 15px;margin-top: 15px;">
                <el-button type="primary" @click="addGroup">新增</el-button>
                <el-button type="success" @click="edit">修改</el-button>
                <el-button type="danger" @click="del">删除</el-button>
                <el-button type="primary" @click="division">设备划分</el-button>
                <!--<el-button type="info" @click="policy">制定策略</el-button>-->
                <!--<el-button type="danger" @click="policy('-1')">解除策略</el-button>-->
                <!--<el-button type="success" @click="groupConfig(1)">群同步策略</el-button>-->
                <!--<el-button type="primary" @click="groupConfig(2)">群开</el-button>-->
                <!--<el-button type="danger" @click="groupConfig(3)">群断</el-button>-->
            </div>
<!--            设备分组-->
            <div v-if="tabIndexActive == 'first'" class="radio-select-style">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        border  stripe
                        height="300"
                        @row-click="handleSelectionChangeRow">
<!--                        @selection-change="handleSelectionChange">-->
                    <el-table-column type="selection" width="55" disabled="true"></el-table-column>
                    <el-table-column prop="groupName" label="名称"></el-table-column>
                    <!--<el-table-column prop="groupCode" label="编号"></el-table-column>-->
                    <el-table-column prop="deviceNum" label="设备数"></el-table-column>
<!--                    <el-table-column prop="address" label="协议类型"></el-table-column>-->
                    <!--<el-table-column prop="dataCollectorName" label="所属集中器"></el-table-column>-->
                    <el-table-column prop="remark" label="简介"></el-table-column>
                </el-table>
            </div>
<!--            自定义分组-->
           <div v-if="tabIndexActive == 'second'">
               <el-table
                       :data="tableData"
                       border stripe
                       style="width: 100%">
                   <el-table-column type="selection" width="55"></el-table-column>
                   <el-table-column prop="groupCode" align="center" label="IMEI"></el-table-column>
                   <el-table-column prop="name" align="center" label="名称"></el-table-column>
                   <el-table-column prop="address" align="center" label="设备总数"></el-table-column>
                   <el-table-column prop="address" align="center" label="备注"></el-table-column>
               </el-table>
           </div>

            <v-echild v-if="tabIndexActive == 'first'" :parentData="parentDataList" v-on:ListenChild="ListenChild"></v-echild>
            <v-custom v-if="tabIndexActive == 'second'" style="margin-top: 20px;"></v-custom>
        </div>


        <!--        新增设备组-->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%">
            <div style="" v-if="tabIndexActive == 'first'">
                <el-form label-width="120px" style="">
                    <!--<el-form-item label="所属集中器" class="limit-width">-->
                        <!--<el-select v-model="baseForm.dataCollector" placeholder="请选择">-->
                            <!--<el-option v-for="item in selectConcentrator" :key="item.deviceId" :label="item.deviceName" :value="parseInt(item.deviceId)"></el-option>-->
                        <!--</el-select>-->
                    <!--</el-form-item>-->
<!--                    <el-form-item label="协议类型" class="limit-width">-->
<!--                        <el-select v-model="baseForm.typeName" placeholder="请选择活动区域">-->
<!--                            <el-option label="区域一" value="beijing"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="名称" class="limit-width">
                        <el-input v-model="baseForm.groupName" style="width:35.5%"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="编号" class="limit-width">-->
                        <!--<el-input v-model="baseForm.groupCode" style="width:35.5%"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="描述信息" class="limit-width">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="baseForm.remark" style="width: 70%;">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="tabIndexActive == 'second'">
                <el-form label-width="120px" style="">
                    <el-form-item label="IMEI" class="limit-width">
                        <el-input v-model="baseForm.remark" style="width:35.5%"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" class="limit-width">
                        <el-input v-model="baseForm.remark" style="width:35.5%"></el-input>
                    </el-form-item>
                    <el-form-item label="描述信息" class="limit-width">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="baseForm.remark" style="width: 70%;">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form')">确 定</el-button>
            </span>
        </el-dialog>

<!--        设备划分-->
        <el-dialog title="设备组划分" :visible.sync="isShowDivision" width="70%" >
            <div style="">
                <v-edivision :parentData="parentData" :isShowDivision="isShowDivision"></v-edivision>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowDivision = false">返 回</el-button>
<!--                <el-button type="primary" @click="saveEdit('form')">确 定</el-button>-->
            </span>
        </el-dialog>

<!--        制定策略-->
        <el-dialog title="制定策略" :visible.sync="isShowPolicy" width="70%">
            <div style="">
                <v-cpolicy :parentData="multipleSelection" :statData="statData" ref="childData"></v-cpolicy>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowPolicy = false">取 消</el-button>
                <el-button type="primary" @click="saveStrategy">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>该操作是群组操作，您确定要执行该操作吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="tipOption">确 定</el-button>
              </span>
        </el-dialog>
    </div>




</template>

<script>
    import { getDeviceGroupExtendInfo,getAllCollector,addDeviceGroup,delDeviceGroup,updateDeviceGroup,allocateStrategyToGroup} from '../../../api/index';
    import {clearObjValue} from '../../common/com';
    import vEchild from './equipmentGroupChild.vue';
    import vCustom from './customGroup.vue';
    import vEdivision from './equipmentDivision.vue';
    import vCpolicy from './customPolicy.vue';
    export default {
        name: "equipmentGroup",
        components:{
            vEchild,vCustom,vEdivision,vCpolicy
        },
        data() {
            return {
                tableData: [],
                tabIndexActive:'first',
                diologTitle:'新增设备组',
                addVisible:false,
                isShowDivision:false,
                isShowPolicy:false,
                multipleSelection:[],
                baseForm:{
                    groupCode:'',
                    groupName:'',
                    dataCollector:'',
                    remark:'',
                },
                selectConcentrator:[],
                isEidt:false,
                parentData:'',
                parentDataList:'',
                statData:[],
                dialogVisible:false,
                groupBtnIndex:0
            }
        },
        created(){
            this.getData();
        },
        watch:{
            parentDataList:(val)=>{
                console.log(val)
            }
        },


        methods:{
            ListenChild(val){
                console.log(val)
                this.statData = val;
            },
            //获取设备组列表
            getData(){
                getDeviceGroupExtendInfo({}).then((res)=>{
                    console.log(res)
                    this.tableData = res.datas;
                    this.parentDataList = res.datas[0].id;
                })
            },
            //切换tab
            handleClick(tab, event) {
                console.log(tab.name);
            },
            //添加分组
            addGroup(){
                this.addVisible = true;
                this.isEidt = false;
                this.baseForm = clearObjValue(this.baseForm)
                this.getAllCollectorType();
            },
            //保存数据
            saveEdit(){
                if(this.isEidt){
                    var editPostData = this.multipleSelection[0];
                    editPostData['remark'] = this.baseForm.remark;
                    editPostData['groupCode'] = this.baseForm.groupCode;
                    editPostData['dataCollector'] = this.baseForm.dataCollector;
                    editPostData['groupName'] = this.baseForm.groupName;
                    console.log(editPostData)
                    updateDeviceGroup(editPostData).then((res)=>{
                        if(res.success){
                            this.addVisible = false;
                            this.getData();
                            this.$message.success(res.message)
                        }else{
                            this.$message.error(res.message)
                        }

                    })
                    return ;
                }
                // if(!this.baseForm.dataCollector){
                //     this.$message.error('请选择集中器');
                //     return;
                // }
                if(!this.baseForm.groupName){
                    this.$message.error('请输入名称');
                    return;
                }
                // if(!this.baseForm.groupCode){
                //     this.$message.error('请输入编号');
                //     return;
                // }
                addDeviceGroup(this.baseForm).then((res)=>{
                   if(res.success){
                       this.addVisible = false;
                       this.$message.success(res.message);
                       this.getData();
                   }else{
                       this.$message.error(res.message)
                   }
                })
            },
            groupConfig(v){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能选择一个设备组');
                    return;
                }
                this.dialogVisible = true;
                this.groupBtnIndex = v;
                console.log(this.multipleSelection)


            },
            //群操作提示确认按钮
            tipOption(){
                var strZh = "";
                var str = "";
                if(this.groupBtnIndex==1){
                    strZh = '同步策略';
                    str = 'sync,' + this.multipleSelection[0].id
                }else{
                    if(this.groupBtnIndex==2){
                        console.log('群开')
                        strZh = '1,群开';
                    }else{
                        console.log('群断')
                        strZh = '0,群断';
                    }
                    str = 'group,'+
                        this.multipleSelection[0].dataCollector+','+
                        this.multipleSelection[0].groupCode+','+
                        strZh;
                }

                this.socketApi.sendSock(this,str,(data)=>{
                    this.$message.success(JSON.parse(data).message);
                    this.dialogVisible = false;
                });
            },
            //弹出设备划分弹窗
            division(){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能选择一个设备组');
                    return;
                }
                this.isShowDivision = true;
            },
            //弹出制定策略弹窗
            policy(v){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能选择一个设备组');
                    return;
                }
                if(v&&v=='-1'){
                    allocateStrategyToGroup({
                        strategyId:'-1',
                        groupId:this.multipleSelection[0].id
                    }).then((res)=>{
                        if(res.success){
                            this.$message.success(res.message);
                            this.getData();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                    return ;
                }
                this.isShowPolicy = true;
            },
            // 设备分组选中切换
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.parentDataList = this.multipleSelection[0].id;
                this.parentData = this.multipleSelection;

                console.log(this.multipleSelection)
                this.$refs.multipleTable.clearSelection()

            },
            //设备分组整行选中
            handleSelectionChangeRow(row, column, event){
                this.multipleSelection = [row];
                this.parentData =  this.multipleSelection;
                this.parentDataList =  this.multipleSelection[0].id;
                this.parentDataList = row.id;
                this.$refs.multipleTable.clearSelection();
                this.$refs.multipleTable.toggleRowSelection(row);
                // this.$refs.multipleTable.toggleRowSelection(row);



                // this.$refs.multipleTabel.clearSelection();
            },


            //获取网关下拉
            getAllCollectorType(){
                getAllCollector({
                }).then((res) =>{
                    console.log(res)
                    this.selectConcentrator =res.datas;
                    console.log(this.selectConcentrator)
                })
            },
            //修改设备组
            edit(){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择需要修改的设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能修改一个设备组');
                    return;
                }
                this.addVisible = true;
                this.isEidt = true;

                this.baseForm = {
                    groupCode:this.multipleSelection[0].groupCode,
                    groupName:this.multipleSelection[0].groupName,
                    dataCollector:this.multipleSelection[0].dataCollector,
                    remark:this.multipleSelection[0].remark,
                }
                this.getAllCollectorType();
            },
            del(){
                if( this.multipleSelection.length<=0){
                    this.$message.error('请选择需要删除的设备组');
                    return ;
                }
                if( this.multipleSelection.length>1){
                    this.$message.error('每次只能删除一个设备组');
                    return;
                }
                // var ids = [];
                // for(var i = 0;i<this,multipleSelection.length;i++){
                //     ids.push(this.multipleSelection[i].id);
                // }
                delDeviceGroup({id:this.multipleSelection[0].id}).then((res)=>{
                    if(res.success){
                        this.getData();
                        this.$message.success(res.message)
                    }else{
                        this.$message.error(res.message)
                    }
                })
            },
            saveStrategy(v){
                if(this.$refs.childData.tableList.length<=0){
                    this.$message.error('请选择策略');
                    return ;
                }

                // console.log(this.multipleSelection[0])
                // console.log(this.$refs.childData.tableList[0])
                allocateStrategyToGroup({
                    strategyId:this.$refs.childData.tableList[0].id,
                    groupId:this.multipleSelection[0].id
                }).then((res)=>{
                   if(res.success){
                       this.$message.success(res.message);
                       this.isShowPolicy = false;
                       this.getData();
                   }else{
                       this.$message.error(res.message);
                   }
                })
            },

        },

    }
</script>

<style scoped>
    /deep/ .radio-select-style thead  .el-table-column--selection .cell{
        display: none;
    }
    /deep/ .radio-select-style tbody .el-table-column--selection .cell{
        pointer-events:none
    }
</style>
